<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <title>订单录入与修改</title>
    <style>
      html,
      body,
      ul,
      li,
      p {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      li {
        display: block;
      }

      img,
      canvas,
      video {
        vertical-align: middle;
      }

      html {
        background: #3c394a;
      }

      .tabbar {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
      }

      .tabbar-item {
        /* width: 50px;
      height: 50px; */
        border-radius: 100px;
        color: #fff;
        font-size: 13px;
        padding: 5px 10px;
        background-color: #9491c0;
      }

      .tabbar-item.active {
        background-color: #7971e9;
      }

      .tabbar-item-menu {
        background-color: #464358;
      }

      .wrap {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - 47px);
      }

      .wrapper {
        margin-top: 10px;
      }

      .block {
        margin: 0 10px 10px;
        background: #fff;
        border-radius: 5px;
        padding: 10px;
      }

      .block .title {
        display: flex;
        align-items: center;
        margin: 5px 0;
      }

      .block .title .icon {
        width: 25px;
        height: 25px;
        background-color: #6f9ff2;
        border-radius: 50%;
      }

      .block .title .text {
        color: #888;
        font-size: 15px;
        margin-left: 5px;
      }

      .block .item {
        color: #222;
        font-size: 14px;
        padding-top: 10px;
        display: flex;
        align-items: center;
      }
      .block .item-column {
        flex-direction: column;
        align-items: baseline;
      }

      .block .item2 {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      .block .item strong {
        font-size: 15px;
      }

      .block .item i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #229c73;
        margin: 0 10px 0 5px;
      }

      .block .updateTime {
        text-align: right;
        font-size: 14px;
        color: #9aa;
      }

      /* vue animation */

      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }

      .fade-enter-to,
      .fade-leave {
        opacity: 1;
      }

      .fade-enter-active,
      .fade-leave-active {
        transition: all 0.2s;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="wrap">
        <!-- <transition-group name="fade"> -->
        <template v-if="tabbarIndex === 3">
          <order-statistics
            :list="list"
            :tabbar-index="tabbarIndex"
            v-if="true"
          ></order-statistics>
        </template>
        <!-- 订单录入 start -->
        <template v-if="tabbarIndex === 0">
          <div class="wrapper">
            <div
              class="header-tab"
              v-for="(item, index) in headerTab"
              :key="index"
            >
              <div v-if="index === 0" class="cus-row">
                <p>订单总金额</p>
                <p><input type="text" v-model="amount" /></p>
              </div>
            </div>
          </div>
        </template>
        <!-- 订单录入 end -->

        <!-- 修改订单 -->
        <template v-if="tabbarIndex === 1">
          <div class="wrapper">
            <ul v-for="(li, index) in orderList" :key="index">
              <order-li :li="li"></order-li>
            </ul>
          </div>
        </template>
        <!-- </transition-group> -->
      </div>
      <div class="tabbar">
        <div
          v-for="(item, index) in tabbar"
          :key="index"
          class="tabbar-item"
          :class="tabbarIndex === index ? 'active' : ''"
          @click="tabbarIndex = index"
        >
          {{ item.text }}
        </div>
        <!--
          <div class="tabbar-item tabbar-item-menu">
            <img src="" alt="">
          </div>
        -->
      </div>
    </div>
    <script>
      var orderStatistics = `
        <div class="wrapper">
          <div v-for="(item, index) in list" :key="index + '' + tabbarIndex" class="block">
              <order-statistics-sub :item="item" v-if="index === 0"></order-statistics-sub>
              <release-statistics-sub :item="item" v-if="index === 1"></release-statistics-sub>
              <profit-statistics-sub v-if="index === 2" :item="item"></profit-statistics-sub>
              <returned-statistics-sub v-if="index === 3" :item="item"></returned-statistics-sub>
          </div>
        </div>`

      var orderStatisticsSub = `
    <div>
      <div class="title">
        <div class="icon">
          <img src="" alt="">
        </div>
        <p class="text">{{item.company}}</p>
      </div>
      <div class="item">
        <i></i>
        <div class="item2">
          <p>本月客户总数：
            <strong>{{item.income.target}}</strong>
          </p>
          <p>客户跟进次数：
            <strong>{{item.income.customerIncomeNum}}</strong>
          </p>
        </div>
      </div>
      <div class="item">
        <i></i>
          <div class="item2">
            <p>新客户数：
              <strong>{{item.income.reality}}</strong>
            </p>
            <p>老客户数：
              <strong>{{item.income.reality}}</strong>
            </p>
          </div>
      </div>
      <div class="item">
        <i></i>
        <p>媒介客户：
          <strong>{{item.income.paymentCollectio}}</strong>
        </p>
      </div>
      <div class="updateTime">今天16:57更新</div>
    </div>
  `
      var releaseStatisticsSub = `
        <div>
          <div class="title">
            <div class="icon">
              <img src="" alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>本月目标：
              <strong>{{item.income.target}}</strong>
            </p>
          </div>
          <div class="item" v-if="item.income.putIn">
            <i></i>
              <div class="item2">
                <p>本月投放：
                  <strong>{{item.income.putIn}}</strong>
                </p>
                <p>完成率：
                  <strong>{{item.income.putIn}}</strong>
                </p>
              </div>
          </div>
          <div class="item" v-if="item.income.currentMonthAmount">
            <i></i>
            <p>本月条数：
              <strong>{{item.income.currentMonthAmount}}</strong>
            </p>
          </div>
          <div class="item" v-if="item.income.annualTarget">
            <i></i>
            <p>年度目标：
              <strong>{{item.income.annualTarget}}</strong>
            </p>
          </div>
          <div class="item" v-if="item.income.annualPutIn">
            <i></i>
            <p>年度投放：
              <strong>{{item.income.annualPutIn}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      `
      var profitStatisticsSub = `
        <div>
          <div class="title">
            <div class="icon">
              <img src="" alt="">
            </div>
            <p class="text">{{item.company}}</p>
          </div>
          <div class="item">
            <i></i>
            <p>本月目标：
              <strong>{{item.income.target}}</strong>
            </p>
          </div>
          <div class="item" v-if="item.income.currentProfit">
            <i></i>
            <p>本月利润：
              <strong>{{item.income.currentProfit}}</strong>
            </p>
          </div>
          <div class="item" v-if="item.income.annualTarget">
            <i></i>
            <p>年度目标：
              <strong>{{item.income.annualTarget}}</strong>
            </p>
          </div>
          <div class="item" v-if="item.income.annualProfit">
            <i></i>
            <p>年度利润：
              <strong>{{item.income.annualProfit}}</strong>
            </p>
          </div>
          <div class="updateTime">今天16:57更新</div>
        </div>
      `
      var returnedStatistics = `
    <div>
      <div class="title">
        <div class="icon">
          <img src="" alt="">
        </div>
        <p class="text">{{item.company}}</p>
      </div>
      <div class="item">
        <i></i>
        <p>回款目标：
          <strong>{{item.income.target}}</strong>
        </p>
      </div>
      <div class="item" v-if="item.income.money">
        <i></i>
        <p>回款金额：
          <strong>{{item.income.money}}</strong>
        </p>
      </div>
      <div class="item" v-if="item.income.refund">
        <i></i>
        <p>退款总数：
          <strong>{{item.income.refund}}</strong>
        </p>
      </div>
      <div class="item" v-if="item.income.annualPutIn">
        <i></i>
        <p>年度利润：
          <strong>{{item.income.annualPutIn}}</strong>
        </p>
      </div>
      <div class="updateTime">今天16:57更新</div>
    </div>
  `
      var orderLi = `
        <li class="block">
          <div class="item item-column">
            <p><strong>订单号：</strong>{{li.id}}</p>
            <p>订单状态：{{li.status}}</p>
            <p>客户名称：{{li.customerName}}</p>
            <div class="item2"><p>接单日期：{{li.orderDate}}</p><p>投放日期：{{li.putInDate}}</p></div>
          </div>
        </li>
    `

      // Vue.component('order-a', {
      //   props: ['list'],
      //   template: orderStatistics
      // })
      Vue.component('orderStatisticsSub', {
        props: ['item'],
        template: orderStatisticsSub
      })
      Vue.component('releaseStatisticsSub', {
        props: ['item'],
        template: releaseStatisticsSub
      })
      Vue.component('profitStatisticsSub', {
        props: ['item'],
        template: profitStatisticsSub
      })
      Vue.component('returnedStatisticsSub', {
        props: ['item'],
        template: returnedStatistics
      })
      Vue.component('orderLi', {
        props: ['li'],
        template: orderLi
      })

      function fakeData() {
        return (Math.random() * 300 + 50).toFixed(2)
      }
      var Random = Mock.Random
      Random.extend({
        menusub: function(date) {
          var menuitems = ['录入订单', '修改订单', '取消订单']
          return this.pick(menuitems)
        }
      })
      var mockData = Mock.mock({
        'list|1-4': [
          {
            'company|1': '@menusub'
          }
        ],
        'orderList|3-10': [
          {
            id: /^\d{10}$/,
            'status|0-2': function() {
              var status = '待拜访'
              switch (this.status) {
                case 0:
                  status = '代发货'
                  break
                case 1:
                  status = '去吧'
                  break
                case 2:
                  status = 'ok'
                  break
              }
              return status
            },
            'customerName': '@cname',
            'orderDate': '@date',
            'putInDate': '@date'
          }
        ],
        'entryOrder|10': [
          {
            'amount': /^\d{3,6}$/, // 订单总金额
            'orderDate': '@date',  // 接单日期
            'orderPersonal': '@cname', // 接单人
            'customerName':'@cname',  // 客户名称
            'customerIndustry': '@cword(4,7)', // 客户行业
            'serviceCharge': /^\d{2,4}$/, // 服务费
            'billingType': '@cword(3,8)', // 开票类型
            'companyTaxRate': function() {
              return Random.float(3, 30, 1, 2) + '%' // 公司税率
            },
            'taxes': '@integer(10000)',
            'contract': '', // 合同上传
            'remark': '@csentence(5,10)', // 备注
          }
        ]
      })
      console.log(JSON.stringify(mockData, null, 4))

      var releData = mockData
      var vm = new Vue({
        el: '#app',
        components: {
          orderStatistics: {
            props: ['list', 'tabbarIndex'],
            template: orderStatistics
          }
        },
        data() {
          return {
            // 当前底部菜单 index
            tabbarIndex: -1,
            // 底部菜单
            tabbar: [
              {
                color: '#7971e9',
                text: '录入订单'
              },
              {
                color: '#60aef8',
                text: '修改订单'
              },
              {
                color: '#60aef8',
                text: '取消订单'
              }
            ],
            list: [
              {
                company: '客户统计',
                income: {
                  target: fakeData(),
                  customerIncomeNum: fakeData(),
                  reality: fakeData(),
                  paymentCollectio: fakeData()
                },
                accounts: {
                  total: parseInt(Math.random() * 100),
                  deliciousFoods: fakeData(),
                  entertainment: fakeData(),
                  livelihood: fakeData()
                },
                profit: {
                  target: fakeData(),
                  reality: fakeData()
                },
                profitRate: {
                  percentage: parseInt(Math.random() * 100) + '%'
                }
              },
              {
                company: '投放统计',
                income: {
                  target: fakeData(),
                  reality: fakeData(),
                  paymentCollectio: fakeData(),
                  putIn: fakeData(),
                  currentMonthAmount: fakeData(),
                  annualTarget: fakeData(),
                  annualPutIn: fakeData()
                },
                accounts: {
                  total: parseInt(Math.random() * 100),
                  deliciousFoods: fakeData(),
                  entertainment: fakeData(),
                  livelihood: fakeData()
                },
                profit: {
                  target: fakeData(),
                  reality: fakeData()
                },
                profitRate: {
                  percentage: parseInt(Math.random() * 100) + '%'
                }
              },
              {
                company: '利润统计',
                income: {
                  target: fakeData(),
                  reality: fakeData(),
                  paymentCollectio: fakeData(),
                  currentProfit: fakeData(),
                  annualTarget: fakeData(),
                  annualProfit: fakeData()
                },
                accounts: {
                  total: parseInt(Math.random() * 100),
                  deliciousFoods: fakeData(),
                  entertainment: fakeData(),
                  livelihood: fakeData()
                },
                profit: {
                  target: fakeData(),
                  reality: fakeData()
                },
                profitRate: {
                  percentage: parseInt(Math.random() * 100) + '%'
                }
              },
              {
                company: '回款统计',
                income: {
                  target: fakeData(),
                  reality: fakeData(),
                  paymentCollectio: fakeData(),
                  money: fakeData(),
                  refund: fakeData()
                },
                accounts: {
                  total: parseInt(Math.random() * 100),
                  deliciousFoods: fakeData(),
                  entertainment: fakeData(),
                  livelihood: fakeData()
                },
                profit: {
                  target: fakeData(),
                  reality: fakeData()
                },
                profitRate: {
                  percentage: parseInt(Math.random() * 100) + '%'
                }
              }
            ],
            // 订单列表
            orderList: releData.orderList,
            // 头部tab
            headerTab: ['添加投放账号', '整安代发', '其他'],
            // TODO 订单录入字段
            entryOrder: releData.entryOrder
          }
        },
        mounted: function() {
          console.log('mounted')
        }
      })
    </script>
  </body>
</html>
